function getByClass(oParent, sClass) {
	var aEle = oParent.getElementsByTagName('*');
	var aResult = [];

	for (var i = 0; i < aEle.length; i++) {
		if (aEle[i].className == sClass) {
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}

window.onload = function() {

	var odiv = document.getElementById('playimg');
	var oBtnPrev = getByClass(odiv, 'prev')[0];
	var oBtnNext = getByClass(odiv, 'next')[0];
	var oMark_Left = getByClass(odiv, 'mark_left')[0];
	var oMark_Right = getByClass(odiv, 'mark_right')[0];
	var odivsmall = getByClass(odiv, 'small_pic')[0];
	var aliSmall = odivsmall.getElementsByTagName('li');
	var oulBig = getByClass(odiv, 'big_pic')[0];
	var oulsmall = odivsmall.getElementsByTagName('ul')[0];
	var aliBig = oulBig.getElementsByTagName('li');
	var nowZindex = 2;
	var now = 0;
	oulsmall.style.width = (aliSmall[1].offsetWidth) * (aliSmall.length) + 'px';

	oMark_Left.onmouseover = oBtnPrev.onmouseover = function() {
		startmove(oBtnPrev, 'opacity', 100);
	}
	oMark_Left.onmouseout = oBtnPrev.onmouseout = function() {
		startmove(oBtnPrev, 'opacity', 20);
	}
	oMark_Right.onmouseover = oBtnNext.onmouseover = function() {
		startmove(oBtnNext, 'opacity', 100);
	}
	oMark_Right.onmouseout = oBtnNext.onmouseout = function() {
		startmove(oBtnNext, 'opacity', 20);
	}

	for (var i = 0; i < aliSmall.length; i++) {

		aliSmall[i].index = i;
		aliSmall[i].onclick = function() {
			if (this.index == now)
				return;
			now = this.index;
			tab();
		};

		aliSmall[i].onmouseover = function() {
			startmove(this, 'opacity', 100);
		}
		aliSmall[i].onmouseout = function() {
			if (this.index != now)
				startmove(this, 'opacity', 60);
		}
	}
	function tab() {
		aliBig[now].style.zIndex = nowZindex++;
		for (var i = 0; i < aliSmall.length; i++) {
			startmove(aliSmall[i], 'opacity', 60);
		}
		startmove(aliSmall[now], 'opacity', 100);

		aliBig[now].style.height = 0;
		startmove(aliBig[now], 'height', 320);
		if (now == 0) {
			startmove(oulsmall, 'left', 0);
		} else if (now == aliSmall.length - 1) {
			startmove(oulsmall, 'left', -(now - 2) * aliSmall[0].offsetWidth);
		} else {
			startmove(oulsmall, 'left', -(now - 1) * aliSmall[0].offsetWidth);
		}
	}
	oBtnPrev.onclick = function() {
		now--;
		if (now == -1) {
			now = aliSmall.length - 1;
		}
		tab();
	}
	oBtnNext.onclick = function() {
		now++;
		if (now == aliSmall.length) {
			now = 0;
		}
		tab();
	}
	var timer = setInterval(oBtnNext.onclick, 2000);
	odiv.onmouseover = function() {
		clearInterval(timer);
	}
	odiv.onmouseout = function() {
		timer = setInterval(oBtnNext.onclick, 2000);
	}

}
